The :has() pseudo-class in CSS allows you to select elements that contain certain descendants or match specific conditions. It works like a parent selector, which was previously difficult to achieve with CSS alone.

Why :has() Is Powerful

1
:has(selector) selects elements that have at least one descendant matching the selector inside them.
2
It enables styling of a parent based on the state or presence of its children, something CSS could not do reliably before.
3
Can be combined with other pseudo-classes, e.g., :has(:checked) to style a container if a checkbox inside it is checked.
4
Reduces the need for extra JavaScript for dynamic styling based on child elements.

Example: Using :has() to Style Parent Elements

In this example, when any checkbox inside .form-section is checked, the parent container receives a green border and light green background, providing immediate visual feedback without JavaScript.

Best Practices

1
Use :has() to apply styles based on child elements or states.
2
Combine with :not() and other pseudo-classes for more precise targeting.
3
Be aware of browser support; older browsers may not support :has().
4
Keep selectors readable and avoid overly complex nested :has() for maintainability.

Difficulty: 6/10

Topics: CSS :has() selector, dynamic parent selection, CSS performance implications

Scenario Questions

0-2 years experience

1
You're trying to style a parent div when it contains a button with class 'danger' — how would you write that CSS using :has()?
2
What happens if you write div:has(span) and the span is dynamically added via JavaScript? Will the style apply immediately?
3
If you use :has() to style a list item when it has a child img, but the image fails to load, does the style still apply?

2-5 years experience

1
A card component uses :has() to highlight the entire card when any child input is focused, but users report lag on mobile — what could be causing it, and how would you debug it?
2
Your team replaced a JavaScript hover effect with :has() for better performance, but now the layout shifts unexpectedly on Safari — what’s likely going wrong?
3
You're building a form validation UI where error messages should trigger a red border on the entire form group — why might :has() be better than adding a class via JS here, and what edge case could break it?

5-8 years experience

1
You're designing a reusable component library that uses :has() for conditional styling based on child content — how do you balance the expressiveness of :has() against potential performance costs in large-scale apps with hundreds of instances?
2
How would you architect a CSS strategy for a dynamic dashboard where components change structure based on user preferences, and :has() is used to adapt styles — what caching, isolation, or fallback patterns would you consider?
3
A legacy UI uses JavaScript to style parent containers based on child state. You want to migrate to :has() — what metrics would you track to prove the migration improved performance, and what edge cases might cause regressions?

8+ years experience

1
You're leading a cross-team initiative to standardize UI styling patterns across 20+ products. Some teams rely on :has() for dynamic styling, others avoid it due to performance concerns — how do you establish a company-wide policy that balances developer velocity and long-term scalability?
2
Your company is migrating from a legacy CSS-in-JS system to vanilla CSS with :has(). How do you evaluate the technical debt of existing JavaScript-driven parent styling, and what migration strategy would you propose to minimize user-facing regressions?
3
How would you design a CSS architecture that allows :has() to be safely adopted in a component-driven design system without creating hidden performance traps for downstream teams who may not understand its runtime implications?

Follow-up Questions

❓How would you test if :has() is causing layout thrashing in a dynamic list?
❓What happens if you use :has() with a complex selector chain in a high-frequency re-rendering component?
❓Can you think of a scenario where :has() would be more appropriate than JavaScript event listeners?